<template>
  <div
    style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666; font-size: 15px;"
  >
    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
    color:#000
"
      >
        <i class="el-icon-document"></i>基础信息
      </span>
      <el-button
        @click="goback()"
        size="mini"
        round
        style="margin-left: 1000px;"
        type="primary"
        >返回</el-button
      >
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺授权编号：</span>
            <span>{{ this.formCorp.authCode }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>店铺名称：</span>
            <span>{{ this.formCorp.storeName }}</span>
          </div>
        </el-col>
        <el-col :span="9" :push="2">
          <div class="grid-content bg-purple">
            <span>店铺申请时间：</span>
            <span>{{ this.formCorp.createTime }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>所属大区：</span>
            <span>{{ this.formRental.upOrgZone }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>所属营销区域：</span>
            <span>{{ this.formRental.baseName }}</span>
          </div>
        </el-col>
        <!-- <el-col :span="6" :push="1">
            <div class="grid-content bg-purple">
                <span>所属营销区域业务员：</span>
                <span>{{this.formRental.basePersonName}}</span>
            </div>
            </el-col> -->
      </el-row>
      <el-row :gutter="20">
        <!-- <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺通过申请时间：</span>
            <span>{{this.formCorp.storeName}}</span>
          </div>
        </el-col>-->
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺类型：</span>
            <span v-if="this.formCorp.storeType == 1">一代店或二代店</span>
            <span v-if="this.formCorp.storeType == 2">三代店</span>
            <span v-if="this.formCorp.storeType == 3">四代店</span>
            <span v-if="this.formCorp.storeType == 4">体验店</span>
            <span v-if="this.formCorp.storeType == 5">专柜</span>
            <span v-if="this.formCorp.storeType == 6">品牌专区</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-suitcase"></i>店铺信息
      </span>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>开业日期：</span>
            <span>{{ this.formShop.openDate }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>所属省份：</span>
            <span>{{ this.formShop.province }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>所属城市：</span>
            <span>{{ this.formShop.city }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺地址：</span>
            <span>{{ this.formShop.storeAddressDetail }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>经度：</span>
            <span>{{ this.formShop.storeLng }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>纬度：</span>
            <span>{{ this.formShop.storeLat }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" :push="1">
          <div class="grid-content bg-purple">
            <span>经销商名：</span>
            <span>{{ this.formShop.companyName }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="0">
          <div class="grid-content bg-purple">
            <span>经营面积(㎡)：</span>
            <span>{{ this.formCorp.managerArea }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="0">
          <div class="grid-content bg-purple">
            <span>营业时间：</span>
            <span>{{ this.formShop.value1 + '-' + this.formShop.value2 }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-user"></i>店员档案
      </span>
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        style="width: 100%;margin-bottom: 20px;"
        border
        default-expand-all
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
          fixed
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="店员姓名"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="tel"
          label="手机号"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="headPicUrl"
          label="头像"
          width="200"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.headPicUrl"
              v-if="scope.row.headPicUrl != '' && scope.row.headPicUrl != null"
              width="70"
              height="50"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">{{
            scope.row.status === 0 ? '停用' : '启用'
          }}</template>
        </el-table-column>
        <el-table-column
          prop="zqName"
          label="所属大区"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="jdName"
          label="所属营销区域"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="storeName"
          label="所属专卖店"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="memberCount"
          label="绑定会员数"
          align="right"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="saleAmount"
          label="销售额"
          align="right"
        ></el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="200"
        ></el-table-column>
      </el-table>
    </div>
    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-data-analysis"></i>展示信息
      </span>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>法人姓名：</span>
            <span>{{ this.formShopShow.legalPerson }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>法人手机号：</span>
            <span>{{ this.formShopShow.legalPersonPhone }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="3">
          <div class="grid-content bg-purple">
            <span>店主姓名：</span>
            <span>{{ this.formShopShow.storeOwnerName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店主手机号：</span>
            <span>{{ this.formShopShow.storeOwnerPhone }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>店长姓名：</span>
            <span>{{ this.formShopShow.storeManagerName }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="3">
          <div class="grid-content bg-purple">
            <span>店长手机号：</span>
            <span>{{ this.formShopShow.storeManagerPhone }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺电话：</span>
            <span>{{ this.formShopShow.storePhone }}</span>
          </div>
        </el-col>
        <!-- <el-col :span="10" :push="2">
          <div class="grid-content bg-purple" v-if="meridflag">
            <span>营业执照协议号：</span>
            <span> -->
        <!-- <img :src="this.formRental.businessLicense" style="width:100px;height:100px" /> -->
        <!-- <span>{{this.formRental.businessLicense}}</span>
            </span>
          </div>
        </el-col> -->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店主照片：</span>
            <span v-if="flagimg">
              <img
                :src="this.formShopShow.storeOwnerPic"
                style="width:100px;height:100px"
              />
              <el-button size="mini" style="margin-left:82px" @click="seetu()"
                >点击查看大图</el-button
              >
            </span>

            <el-dialog :visible.sync="dialogVisible1">
              <img width="100%" :src="this.formShopShow.storeOwnerPic" alt />
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>店长照片：</span>
            <span v-if="flagimgone">
              <img
                :src="this.formShopShow.storeManagerPic"
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:82px"
                @click="seetuone()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible2">
              <img width="100%" :src="this.formShopShow.storeManagerPic" alt />
            </el-dialog>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width:100%" v-if="meridflag">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-bank-card"></i>收银信息
      </span>
      <el-row :gutter="20">
        <el-col :span="10" :push="1">
          <div class="grid-content bg-purple">
            <span>工行Merid(12位码)：</span>
            <span>{{ this.formRental.merid }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="0">
          <div class="grid-content bg-purple">
            <span>工行协议:</span>
            <span>{{ this.formRental.agreement }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>微信识别码:</span>
            <span>{{ this.formRental.wechatId }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="10"
          :push="1"
          v-if="
            this.formRental.bankName !== '' &&
              this.formRental.bankName !== null &&
              this.userType !== '2'
          "
        >
          <div class="grid-content bg-purple">
            <span>银行名称：</span>
            <span>{{ this.formRental.bankName }}</span>
          </div>
        </el-col>
        <el-col
          :span="8"
          :push="1"
          v-if="
            this.formRental.bankAccount !== '' &&
              this.formRental.bankAccount !== null &&
              this.userType !== '2'
          "
        >
          <div class="grid-content bg-purple">
            <span>银行账号:</span>
            <span>{{ this.formRental.bankAccount }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width:100%" v-if="meridflagone">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-bank-card"></i>工行建档信息
      </span>

      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>是否有工行对公账户：</span>
            <span v-if="this.formRental.isIcbc == 0">否</span>
            <span v-if="this.formRental.isIcbc == 1">是</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin:80px 0">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>营业执照：</span>
            <span>
              <img
                :src="
                  this.formCorp.businessLicense !== null ||
                  this.formCorp.businessLicense !== ''
                    ? this.formCorp.businessLicense
                    : ''
                "
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:80px"
                @click="seetutwo()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible3">
              <img width="100%" :src="this.formCorp.businessLicense" alt />
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>专卖店门头图片：</span>
            <span>
              <img
                :src="this.formRental.doorwayPic"
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:130px"
                @click="seetuthree()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible4">
              <img width="100%" :src="this.formRental.doorwayPic" alt />
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="9" :push="2">
          <div class="grid-content bg-purple">
            <span>法人身份证正面照片：</span>
            <span>
              <img
                :src="this.formRental.frontCard"
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:165px"
                @click="seetufour()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible5">
              <img width="100%" :src="this.formRental.frontCard" alt />
            </el-dialog>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>法人身份证背面照片：</span>
            <span>
              <img
                :src="this.formRental.backCard"
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:163px"
                @click="seetufive()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible6">
              <img width="100%" :src="this.formRental.backCard" alt />
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="10" :push="2">
          <div class="grid-content bg-purple">
            <span>结算账号照片（开户许可证或其他）：</span>
            <span>
              <img
                :src="this.formRental.settlementPic"
                style="width:100px;height:100px"
              />
              <el-button
                size="mini"
                style="margin-left:275px"
                @click="seetusix()"
                >点击查看大图</el-button
              >
            </span>
            <el-dialog :visible.sync="dialogVisible7">
              <img width="100%" :src="this.formRental.settlementPic" alt />
            </el-dialog>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="width:100%" v-if="meridflagone">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
      >
        <i class="el-icon-folder-opened"></i>附件信息
      </span>

      <el-row :gutter="20">
        <el-col :span="10" :push="1">
          <div class="grid-content bg-purple">
            <span style="margin-right:33px">法定代表人授权书：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('1')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
        <el-col :span="10" :push="2">
          <div class="grid-content bg-purple">
            <span style="margin-right:80px">信息查询使用授权书：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('2')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10" :push="1">
          <div class="grid-content bg-purple">
            <span style="margin-right:81px">收单业务书：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('3')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
        <el-col :span="10" :push="2">
          <div class="grid-content bg-purple">
            <span style="margin-right:32px">非金融企业划型信息采集表：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('4')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10" :push="1">
          <div class="grid-content bg-purple">
            <span style="margin-right:30px">对公客户信息采集表：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('5')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
        <el-col :span="10" :push="2">
          <div class="grid-content bg-purple">
            <span>非自然人客户受益所有人采集表：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('6')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10" :push="1">
          <div class="grid-content bg-purple">
            <span>单位税收居民声明文件：</span>
            <el-button
              type="primary"
              size="small"
              @click="download('7')"
              icon="el-icon-download"
              >点击下载查看</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <el-dialog title="大区审核意见" :visible.sync="dialogVisible" width="50%"> -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      style="width:800px"
    >
      <el-form-item label="是否通过" prop="reviewStatus" style="margin:10px 0">
        <el-select v-model="ruleForm.reviewStatus">
          <el-option label="通过" value="1"></el-option>
          <el-option label="不通过" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="初审意见" prop="reviewOpinion">
        <el-input
          type="textarea"
          v-model="ruleForm.reviewOpinion"
          :rows="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="confirmEdit()" size="mini"
        >确 定</el-button
      >
    </span>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { queryStoreUserInfo } from '@/api/shopMemberset';
import {
  queryUserReviewInfo,
  preliminaryExamination,
  shopPreliminary,
} from '@/api/addShopapply';
import {
  getAllZone,
  getAllBase,
  getBaseUserInfo,
  applyShop,
  queryUserStoreInfo,
  queryReviewInfo,
} from '@/api/addShopapply.js';
// import mapComponent from "@/components/mapComponent";
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
} from 'vue-baidu-map';
export default {
  name: 'AddCaterMerchants',

  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation,
  },
  props: {
    // 在子组件中使用 props 选项去接收来自父组件传递过来的数据
    // dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 450,
    },
    title: {
      type: String,
      default: '点击目标位置自动获取经纬度',
    },
    width: {
      type: [Number, String],
      default: '85%',
    },
    height: {
      type: [Number, String],
      default: '80%',
    },
  },
  data() {
    return {
      ruleForm: {
        reviewStatus: '',
        reviewOpinion: '',
      },
      rules: {
        reviewStatus: [
          { required: true, message: '请选择大区审核意见', trigger: 'blur' },
        ],
        reviewOpinion: [
          { required: true, message: '请输入初审意见', trigger: 'blur' },
        ],
      },
      flagimg: true,
      flagimgone: true,
      tableData: [],
      imgList: [],
      imgListone: [],
      imgListtwo: [],
      imgListthree: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,

      data1: '',
      BMap: null, // 地图组件是否就绪
      showMapComponent: false,
      keyword: '', // 地区搜索的信息
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px',
      },
      center: { lng: 116.404, lat: 39.915 },
      choosedLocation: { province: '', city: '', district: '', addr: '' },
      zoom: 15,
      active: 0, //步骤计数
      // 选择商户
      meridflag: true,
      meridflagone: true,
      formCorp: {
        createTime: '',
        storeName: '',
        createTime: '',
        storeType: '1', //店铺类型(1标准店、2精品店、3综合体验店)
        managerArea: '', //经营面积
        buildingArea: '', //建筑面积
        practicalArea: '', //实用面积
        leaseholdArea: '', //租赁面积
        warehouseArea: '', //仓库面积
        authCode: '',
        leaseholdArea: '', //
        businessLicense: '',
      },
      //   rules: {
      // storeName: [{ required: true, message: "请输入店铺名称" }],
      // storeType: [{ required: true, message: "请输入店铺类型" }],
      // managerArea: [{ required: true, message: "请输入经营面积" }],
      // buildingArea: [{ required: true, message: "请输入建筑面积" }],
      // leaseholdArea: [{ required: true, message: "请输入租赁面积" }],
      // warehouseArea: [{ required: true, message: "请输入仓库面积" }],
      // businessLicense: [{ required: true, message: "请上传营业执照照片" }]
      //   },
      corpDetails: {}, //商家详情
      corpList: [], //商户列表
      Renarr: [],
      // 选择商户 end
      // 文件
      dialogVisible: false,
      dialogImageUrl: '',
      // /文件
      // 店铺信息
      formShop: {
        openDate: '', //经营状态
        province: '', //租赁时间 开业时间
        city: '',
        storeAddressDetail: '',
        storeLng: '',
        storeLat: '',
        companyName: '',

        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
      },
      openTime: [],
      shopRules: {
        // status: [{ required: true, message: "请选择营业状态" }],
        // rentDate: [{ required: true, message: "请选择开业时间" }],
        // shop_name: [{ required: true, message: "请输入店铺名称" }],
        // shop_alias: [{ required: true, message: "请输入店铺别名" }],
        // telephone: [{ required: true, message: "请输入联系电话" }],
        // shopHours: [{ required: true, message: "请选择营业时间" }],
        // addess: [{ required: true, message: "请输入店铺地址" }],
        // shopBerths: [{ required: true, message: "请选择铺位选择" }]
      },
      // 星期
      listQuery: {
        current: 1,
        size: 10,
      },
      checkAllWeek: false,
      isIndeterminate: true,
      week: [
        { weekNum: 1, weekName: '星期一' },
        { weekNum: 2, weekName: '星期二' },
        { weekNum: 3, weekName: '星期三' },
        { weekNum: 4, weekName: '星期四' },
        { weekNum: 5, weekName: '星期五' },
        { weekNum: 6, weekName: '星期六' },
        { weekNum: 0, weekName: '星期天' },
      ],
      // 每日时间
      DateTime: [
        {
          value: '1',
          label: '每日营业时间一致',
        },
      ],
      // 店铺信息
      // 店铺展示
      formShopShow: {
        legalPerson: '',
        legalPersonPhone: '',
        storeOwnerName: '',
        storeOwnerPhone: '',
        storePhone: '',
        storeOwnerGrade: '',
        storeManagerPhone: '',
        storeManagerName: '',
        doorwayPic: '',
        storeOwnerPic: '',
        storeManagerPic: '',
      },
      headers: { token: localStorage.getItem('token') },
      shopShowRules: {
        introduction: [
          { required: true, message: '请输入门店介绍', trigger: 'blur' },
        ],
        shopPhotos: [
          { required: true, message: '请添加门店图片', trigger: 'change' },
        ],
        recmdProducts: [
          { required: true, message: '请添加推荐商品', trigger: 'change' },
        ],
      },
      userType: '',
      dialogRecmdProducts: false,
      // 店铺展示show end
      // 租金\收银
      formRental: {
        upOrgZone: '',
        baseCode: '',
        // basePersonCode: "",
        merid: '',
        agreement: '',
        wechatId: '',
        isIcbc: '',
        doorwayPic: '',
        frontCard: '',
        bankAccount: '',
        bankName: '',

        backCard: '',
        settlementPic: '',
        businessLicense: '',
      },
      RentalRules: {},
      RentalPayWay: [],
      // 租金\收银 end
    };
  },
  watch: {
    dialogVisible: function(currentValue) {
      this.showMapComponent = currentValue;
      if (currentValue) {
        this.keyword = '';
      }
    },
  },
  computed: {},
  mounted() {
    this._getAllZone();
    console.log(this.$route.params.v, 'llll');

    this.formRental.businessLicense = this.$route.params.v.businessLicense;
    this.getdetail();
    this.logininfo = localStorage.getItem('logininfo');

    this.userType = JSON.parse(this.logininfo).userType;
    // this.rolemanageone()
  },
  methods: {
    confirmEdit(v) {
      console.log(v, this.reviewTypeflag, 'rrr');
      if (
        this.ruleForm.reviewStatus == '' ||
        this.ruleForm.reviewStatus == null
      ) {
        this.$message.error('请选择大区审核意见');
        return;
      }
      if (
        this.ruleForm.reviewOpinion == '' ||
        this.ruleForm.reviewOpinion == null
      ) {
        this.$message.error('请输入初审意见');
        return;
      }

      let data = {
        uuid: this.uuid,
        reviewStatus: this.ruleForm.reviewStatus,
        reviewOpinion: this.ruleForm.reviewOpinion,
      };

      if (this.reviewTypeflag === true) {
        preliminaryExamination(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
          this.dialogVisible = !this.dialogVisible;
          this._queryUserReviewInfo();
        });
      } else if (this.reviewTypeflag === false) {
        shopPreliminary(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
          //   this.dialogVisible = !this.dialogVisible;
          //   this._queryUserReviewInfo();
        });
      }
    },

    seetu() {
      this.dialogVisible1 = true;
    },
    seetuone() {
      this.dialogVisible2 = true;
    },
    seetutwo() {
      this.dialogVisible3 = true;
    },
    seetuthree() {
      this.dialogVisible4 = true;
    },
    seetufour() {
      this.dialogVisible5 = true;
    },
    seetufive() {
      this.dialogVisible6 = true;
    },
    seetusix() {
      this.dialogVisible7 = true;
    },
    //    rolemanageone() {
    //   this.logininfo = localStorage.getItem("logininfo");
    //   this.orgList = JSON.parse(this.logininfo).orgList;
    //   this.orgSeq = this.orgList[0].orgSeq;
    //   console.log(this.logininfo, "ioio00");
    //   let data = {
    //     size: this.listQuery.size,
    //     current: this.listQuery.current,
    //     condition: {

    //       orgSeq: this.orgSeq,

    //     }
    //   };
    //   queryStoreUserInfo(data).then(res => {
    //     this.loading = false;
    //     this.total = res.total;
    //     this.tableData = res.records;
    //     console.log(this.tableData, "ppe");
    //   });
    // },
    download(v) {
      if (this.$route.params.shen == true) {
        let data = { uuid: this.$route.params.v.uuid };
        queryReviewInfo(data).then((res) => {
          console.log(res);
          var arrar = res.result.userIcbcFilingDTOList;
          arrar.forEach((item, i) => {
            console.log(arrar, 'kl');
            if (v == arrar[i].fileType) {
              // window.location.href = arrar[i].fileScanningCopy;
              window.open(arrar[i].fileScanningCopy);
            }
          });
        });
      } else if (this.$route.params.shen == false) {
        let data = { uuid: this.$route.params.v.uuid };
        queryUserStoreInfo(data).then((res) => {
          console.log(res);
          var arrar = res.result.userIcbcFilingDTOList;
          arrar.forEach((item, i) => {
            console.log(arrar, 'kl');
            if (v == arrar[i].fileType) {
              // window.location.href = arrar[i].fileScanningCopy;
              window.open(arrar[i].fileScanningCopy);
            }
          });
        });
      }
    },
    getdetail() {
      if (this.$route.params.shen == true) {
        let data = { uuid: this.$route.params.v.uuid };
        queryReviewInfo(data).then((res) => {
          console.log(res);
          this.tableData = res.result.storeUserInfoDTOS;
          this.$route.params.v = res.result;
          this.formCorp.storeName = this.$route.params.v.storeName;
          this.formCorp.createTime = this.$route.params.v.createTime;
          this.formCorp.storeType = String(this.$route.params.v.storeType);
          this.formCorp.managerArea = this.$route.params.v.managerArea;
          this.formCorp.buildingArea = this.$route.params.v.buildingArea;
          this.formCorp.practicalArea = this.$route.params.v.practicalArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.warehouseArea = this.$route.params.v.warehouseArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.businessLicense = this.$route.params.v.businessLicense;
          this.formCorp.authCode = this.$route.params.v.authCode;
          this.formCorp.createTime = this.$route.params.v.createTime;
          //   this.imgList.push(this.formCorp.businessLicense);

          console.log(this.imgList, 'opop');
          this.formShop.openDate = this.$route.params.v.openDate;
          this.formShop.province = this.$route.params.v.province;
          this.formShop.city = this.$route.params.v.city;
          this.formShop.storeAddressDetail = this.$route.params.v.storeAddressDetail;
          // storeLng: this.formShop.storeLng,
          // storeLat: this.formShop.storeLat,
          this.formShop.storeLng = this.$route.params.v.storeLng;
          this.formShop.storeLat = this.$route.params.v.storeLat;
          this.formShop.companyName = this.$route.params.v.companyName;

          this.formShop.openBeginTime = this.$route.params.v.openBeginTime;
          this.formShop.value1 = this.$route.params.v.openBeginTime;
          this.formShop.openEndTime = this.$route.params.v.openEndTime;
          this.formShop.value2 = this.$route.params.v.openEndTime;

          this.formShopShow.legalPerson = this.$route.params.v.legalPerson;
          this.formShopShow.legalPersonPhone = this.$route.params.v.legalPersonPhone;
          this.formShopShow.storeOwnerName = this.$route.params.v.storeOwnerName;
          this.formShopShow.storeOwnerPhone = this.$route.params.v.storeOwnerPhone;
          this.formShopShow.storePhone = this.$route.params.v.storePhone;
          this.formShopShow.storeOwnerGrade = this.$route.params.v.storeOwnerGrade;
          this.formShopShow.storeManagerPhone = this.$route.params.v.storeManagerPhone;
          this.formShopShow.storeManagerName = this.$route.params.v.storeManagerName;
          this.formShopShow.doorwayPic = this.$route.params.v.doorwayPic;
          this.formShopShow.storeOwnerPic = this.$route.params.v.storeOwnerPic;
          this.formShopShow.storeManagerPic = this.$route.params.v.storeManagerPic;
          this.formRental.upOrgZone = this.$route.params.v.upOrgZone;
          this.formRental.baseName = this.$route.params.v.baseName;
          this.formRental.baseCode = this.$route.params.v.baseCode;

          //   this.formRental.basePersonCode = this.$route.params.v.basePersonCode;
          this.formRental.basePersonName = this.$route.params.v.basePersonName;
          this.formRental.isIcbc = this.$route.params.v.isIcbc;
          this.formRental.merid = this.$route.params.v.merid;
          this.formRental.agreement = this.$route.params.v.agreement;
          this.formRental.wechatId = this.$route.params.v.wechatId;
          this.formRental.bankAccount = this.$route.params.v.bankAccount;
          this.formRental.bankName = this.$route.params.v.bankName;
          this.formRental.doorwayPic = this.$route.params.v.doorwayPic;
          this.formRental.frontCard = this.$route.params.v.frontCard;
          this.formRental.backCard = this.$route.params.v.backCard;
          this.formRental.settlementPic = this.$route.params.v.settlementPic;
          if (res.result.userIcbcFilingDTOList.length == 0) {
            console.log('kl00');
            this.meridflag = true;
            this.meridflagone = false;
          } else if (res.result.userIcbcFilingDTOList.length !== 0) {
            console.log('999');
            this.meridflag = false;
            this.meridflagone = true;
          }
        });
      } else if (this.$route.params.shen == false) {
        let data = { uuid: this.$route.params.v.uuid };
        queryUserStoreInfo(data).then((res) => {
          console.log(res);
          this.tableData = res.result.storeUserInfoDTOS;
          this.$route.params.v = res.result;
          this.formCorp.storeName = this.$route.params.v.storeName;
          this.formCorp.storeType = String(this.$route.params.v.storeType);
          this.formCorp.managerArea = this.$route.params.v.managerArea;
          this.formCorp.buildingArea = this.$route.params.v.buildingArea;
          this.formCorp.practicalArea = this.$route.params.v.practicalArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.warehouseArea = this.$route.params.v.warehouseArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.businessLicense = this.$route.params.v.businessLicense;
          this.formCorp.authCode = this.$route.params.v.authCode;
          this.formCorp.createTime = this.$route.params.v.createTime;

          //   this.imgList.push(this.formCorp.businessLicense);

          console.log(this.imgList, 'opop');
          this.formShop.openDate = this.$route.params.v.openDate;
          this.formShop.province = this.$route.params.v.province;
          this.formShop.city = this.$route.params.v.city;
          this.formShop.storeAddressDetail = this.$route.params.v.storeAddressDetail;
          // storeLng: this.formShop.storeLng,
          // storeLat: this.formShop.storeLat,
          this.formShop.storeLng = this.$route.params.v.storeLng;
          this.formShop.storeLat = this.$route.params.v.storeLat;
          this.formShop.companyName = this.$route.params.v.companyName;

          this.formShop.openBeginTime = this.$route.params.v.openBeginTime;
          this.formShop.value1 = this.$route.params.v.openBeginTime;
          this.formShop.openEndTime = this.$route.params.v.openEndTime;
          this.formShop.value2 = this.$route.params.v.openEndTime;

          this.formShopShow.legalPerson = this.$route.params.v.legalPerson;
          this.formShopShow.legalPersonPhone = this.$route.params.v.legalPersonPhone;
          this.formShopShow.storeOwnerName = this.$route.params.v.storeOwnerName;
          this.formShopShow.storeOwnerPhone = this.$route.params.v.storeOwnerPhone;
          this.formShopShow.storePhone = this.$route.params.v.storePhone;
          this.formShopShow.storeOwnerGrade = this.$route.params.v.storeOwnerGrade;
          this.formShopShow.storeManagerPhone = this.$route.params.v.storeManagerPhone;
          this.formShopShow.storeManagerName = this.$route.params.v.storeManagerName;
          this.formShopShow.doorwayPic = this.$route.params.v.doorwayPic;
          this.formShopShow.storeOwnerPic = this.$route.params.v.storeOwnerPic;

          if (
            this.formShopShow.storeOwnerPic == null ||
            this.formShopShow.storeOwnerPic == ''
          ) {
            this.flagimg = false;
          } else {
            this.flagimg = true;
          }

          this.formShopShow.storeManagerPic = this.$route.params.v.storeManagerPic;
          if (
            this.formShopShow.storeManagerPic == null ||
            this.formShopShow.storeManagerPic == ''
          ) {
            this.flagimgone = false;
          } else {
            this.flagimgone = true;
          }
          this.formRental.upOrgZone = this.$route.params.v.upOrgZone;
          this.formRental.baseName = this.$route.params.v.baseName;
          this.formRental.baseCode = this.$route.params.v.baseCode;

          //   this.formRental.basePersonCode = this.$route.params.v.basePersonCode;
          this.formRental.basePersonName = this.$route.params.v.basePersonName;
          this.formRental.isIcbc = this.$route.params.v.isIcbc;
          this.formRental.merid = this.$route.params.v.merid;
          this.formRental.agreement = this.$route.params.v.agreement;
          this.formRental.wechatId = this.$route.params.v.wechatId;
          this.formRental.bankName = this.$route.params.v.bankName;
          this.formRental.bankAccount = this.$route.params.v.bankAccount;
          this.formRental.doorwayPic = this.$route.params.v.doorwayPic;
          this.formRental.frontCard = this.$route.params.v.frontCard;
          this.formRental.backCard = this.$route.params.v.backCard;
          this.formRental.settlementPic = this.$route.params.v.settlementPic;
          if (res.result.userIcbcFilingDTOList.length !== 0) {
            console.log('lklk');
            this.meridflag = false;
            this.meridflagone = true;
          } else {
            console.log('888');
            this.meridflag = true;
            this.meridflagone = false;
          }
        });
      }
    },
    goback() {
      //   this.$router.push("/headexamine");
      this.$router.go('-1');
    },
    getMsgFormSon(data) {
      console.log(data, '666');
    },

    getlocation() {
      this.showMapComponent = true;
    },
    _getAllZone() {
      let data = {};

      //  };
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },

    selCore(value) {
      console.log(value, 'kk');
      let data = { code: value };
      getAllBase(data).then((res) => {
        this.RentalPayWay = res.result;
      });
    },
    // parentFn(childData) {
    //   this.message = childData;
    //   console.log("kjk");
    // },
    selbase(value) {
      console.log(value, 'kk');
      let data = { orgSeq: value };
      getBaseUserInfo(data).then((res) => {
        this.Renarr = res.result;
      });
    },
    handleCheckAllWeekChange(val) {
      var week = [1, 2, 3, 4, 5, 6, 0];
      this.formShop.shopHours = val ? week : [];
      this.isIndeterminate = false;
    },
    // 单选
    handleCheckedWeekChange(value) {
      var checkedCount = value.length;
      this.checkAllWeek = checkedCount === this.week.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.week.length;
    },
    // 店铺信息 end
    // 展示信息
    addType() {
      this.formShopShow.shopPhotos.push({
        id: '',
        fileType: '',
        label: '',
        labelOrdinal: '',
        ordinal: '',
        url: '',
      });
    },
    delType(index) {
      if (this.formShopShow.shopPhotos.length > 1) {
        this.formShopShow.shopPhotos.splice(index, 1);
      }
    },

    addRecmdProducts() {
      var index = 1;
      this.dialogRecmdProducts = false;
      this.formShopShow.recmdProducts.push({
        id: ++index,
        productId: '',
        productName: this.formShopShow.productName,
        introduction: this.formShopShow.introduction,
        ordinal: '',
        url: '',
      });
    },

    addProduct() {
      this.dialogRecmdProducts = true;
      this.formShopShow.productName = '';
      this.formShopShow.introduction = '';
    },
    handleClose() {
      this.dialogRecmdProducts = false;
    },
    edit(item) {
      this.dialogRecmdProducts = true;
    },
    deleteX(item) {
      this.$confirm('是否删除').then(() => {});
    },

    handlePictureCardPreview(file) {
      console.log(file, 'ooo');
      //   this.dialogImageUrl = file.result;
      //   this.dialogVisible1 = true;
    },
    upLoadPic(file, fileList) {
      console.log(file, 'popo');
      this.dialogImageUrl = file.result;
      this.formCorp.businessLicense = file.result;
    },
    upLoadPicone(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.doorwayPic = file.result;
    },
    upLoadPictwo(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.storeOwnerPic = file.result;
    },
    upLoadPicthree(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.storeManagerPic = file.result;
    },
    //验证表单信息
    submitForm(formName, success) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //通过进入下一步
          this.active += 1;
          success && success();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    prev() {
      if (this.active-- === 0) this.active = 0;
    },
    next() {
      //每一步都要验证表单

      if (this.active === 0) {
        //验证商家信息
        this.submitForm('formCorp');
      } else if (this.active === 1) {
        //验证店铺信息
        this.submitForm('formShop');
      } else if (this.active === 2) {
        //验证展示信息
        this.submitForm('formShopShow');
      } else if (this.active === 3) {
        //验证租金收银信息
        this.submitForm('formRental', () => {
          //全部通过 提交ajax
          //   console.log("oopop");
          //   this.postFormAjax();
        });
      }
    },
    postFormAjax() {
      let data = {
        // 选择商户参数
        storeName: this.formCorp.storeName,
        storeType: this.formCorp.storeType,
        managerArea: this.formCorp.managerArea,
        buildingArea: this.formCorp.buildingArea,
        practicalArea: this.formCorp.practicalArea,
        leaseholdArea: this.formCorp.leaseholdArea,
        warehouseArea: this.formCorp.warehouseArea,
        leaseholdArea: this.formCorp.leaseholdArea,
        businessLicense: this.formCorp.businessLicense,

        openDate: this.formShop.openDate,
        province: this.formShop.province,
        city: this.formShop.city,
        storeAddressDetail: this.formShop.storeAddressDetail,
        // storeLng: this.formShop.storeLng,
        // storeLat: this.formShop.storeLat,
        storeLng: this.formShop.storeLng,
        storeLat: this.formShop.storeLat,
        companyName: this.formShop.companyName,

        openBeginTime: this.formShop.openBeginTime,
        openEndTime: this.formShop.openEndTime,

        legalPerson: this.formShopShow.legalPerson,
        legalPersonPhone: this.formShopShow.legalPersonPhone,
        storeOwnerName: this.formShopShow.storeOwnerName,
        storeOwnerPhone: this.formShopShow.storeOwnerPhone,
        storePhone: this.formShopShow.storePhone,
        storeOwnerGrade: this.formShopShow.storeOwnerGrade,
        storeManagerPhone: this.formShopShow.storeManagerPhone,
        storeManagerName: this.formShopShow.storeManagerName,
        doorwayPic: this.formShopShow.doorwayPic,
        storeOwnerPic: this.formShopShow.storeOwnerPic,
        storeManagerPic: this.formShopShow.storeManagerPic,

        upOrgZone: this.formRental.upOrgZone,
        baseCode: this.formRental.baseCode,
        baseName: this.formRental.baseName,
        baseCode: this.formRental.baseCode,
        // basePersonCode: this.formRental.basePersonCode,
        basePersonName: this.formRental.basePersonName,
        merid: this.formRental.merid,
        agreement: this.formRental.agreement,
        wechatId: this.formRental.wechatId,
        bankAccount: this.formRental.bankAccount,
        bankName: this.formRental.bankName,
      };
      console.log(data);
      this.$confirm('确认提交审核吗？').then(() => {
        applyShop(data).then((res) => {
          console.log(res);

          this.$message({
            message: '提交成功',
            type: 'success',
            center: true,
          });
        });
      });
    },
    // ready事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 BMap 类和 map 实例进行手动控制
    onBaiduMapReady(e) {
      console.log('返回BMap类和map实例', e);
      const that = this;
      this.BMap = e.BMap;
      if (this.BMap) {
        // 获取定位地址信息并赋值给声明变量
        // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
        const geolocation = new this.BMap.Geolocation();
        // 通过 getCurrentPosition() 方法：获取当前的位置信息
        geolocation.getCurrentPosition((res) => {
          console.log('返回详细地址和经纬度', res);
          const { lng, lat } = res.point;
          const {
            province,
            city,
            district,
            street,
            street_number,
          } = res.address;

          that.center = { lng, lat };
          that.choosedLocation = {
            province,
            city,
            district,
            addr: street + street_number,
            lng,
            lat,
          };
        });
      }
    },

    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function(res) {
          console.log('获取经纬度', e.point, '获取详细地址', res);
          //   this.data1 = e.point.lng;

          alert('经度' + e.point.lng + '纬度' + e.point.lat);
          localStorage.setItem('storeLng', e.point.lng);
          localStorage.setItem('storeLat', e.point.lat);
          //   this.formShop.storeLng = e.point.lng;
          //   this.formShop.storeLat = e.point.lat;
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...that.center,
          };
        });
      }
    },

    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
    },
    /** *
     * 确认
     */
    confirm: function() {
      this.showMapComponent = false;
      this.$emit('map-confirm', this.choosedLocation);
    },
    /** *
     * 取消
     */
    cancel: function() {
      this.showMapComponent = false;

      this.$emit('cancel', this.showMapComponent);

      this.formShop.storeLng = localStorage.getItem('storeLng');
      this.formShop.storeLat = localStorage.getItem('storeLat');
    },
  },
};
</script>

<style lang="scss" scoped>
#add-cater-merchants {
  h2 {
    font-size: 24px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(230, 231, 235);
  }
  .container {
    margin-top: 10px;
  }
  .el-input--medium .el-input__inner {
    height: auto !important;
  }
  .idcard {
    display: flex;
  }
  .idcard div {
    margin: 10px;
  }
  .bussLicPhoto {
    display: flex;
  }
  .bussLicPhoto div {
    margin: 5px;
    text-align: center;
  }
}
#add-cater-merchants.route-page {
  background: #fff;
  width: 80%;
  padding: 3% 0;
  margin: 0 auto;
  //   border: 2px #ccc dashed;
  margin-top: 2%;
}
#infoCaterMerchantscopy .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #666;
  border: none;
  cursor: not-allowed;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  //   background: #99a9bf;
}
.bg-purple {
  //   background: #d3dce6;
}
.bg-purple-light {
  //   background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  //   background-color: #f9fafc;
}
/deep/.distpicker-address-wrapper select {
  height: 34px;
  font-size: 13px;
}
</style>
